<template>
    <div class="goods-list">
        <div class="goods-item" v-for="item in goodslist" :key="item.id" @click="goToGoodsInfoPage(item.id)">
            <img :src="item.img_url" alt="item.title">
            <h1 class="title">{{ item.title }}</h1>
            <div class="info">
                <p class="price">
                    <span class="now">￥{{ item.sell_price}}</span>
                    <span class="old">￥{{ item.market_price}}</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩{{ item.stock_quantity }}件</span>
                </p>
            </div>
        </div>

        <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    export default {
        name: "GoodsList",
        data(){
            return {
                pageindex: 1,
                goodslist:[]
            }
        },
        created() {
            this.getGoodsList();
        },
        methods: {
            getGoodsList(){
                this.$axios.get('/api/getgoods?pageindex='+ this.pageindex).then(res => {
                    if(res.data.status === 0){
                        this.goodslist = this.goodslist.concat(res.data.message);
                    }
                })
            },

            getMore(){
                this.pageindex++;
                this.getGoodsList();
            },
            // 跳转商品详情页面
            goToGoodsInfoPage(id){

                //注意：一定要区分this.$route和 this.$router 这两个对象
                //其中：this.$route 是路由【参数对象】，所有路由中的参数，params，query都属于它
                //其中：this.$router 是一个路由【导航对象】，用它可以方便的使用JS代码，实现路由的前进、后退、跳转到新的饿 URL 地址


                // 编程式路由导航
                this.$router.push({ name: 'goodsinfo', params: { id: id}});
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
